<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="tab.css">
</head>
<body>
<div class="js-tab tab" data-config='{
                                         "triggerType":"click",
                                         "effect":"fade",
                                         "invoke":1,
                                         "auto":1000
                                      }' >
  <ul class="tab-nav">
    <li class="actived">
      <a href="javascript:void(0)">新闻</a>
    </li>
    <li>
      <a href="javascript:void(0)">娱乐</a>
    </li>
    <li>
      <a href="javascript:void(0)">电影</a>
    </li>
    <li>
      <a href="javascript:void(0)">科技</a>
    </li>
  </ul>
  <div class="content-warp">
    <div class="content-item current">
      <img src="images/banner_01.jpg" alt=""/>
    </div>
    <div class="content-item">
      <img src="images/banner_02.jpg" alt=""/>
    </div>
    <div class="content-item">
      <img src="images/banner_03.jpg" alt=""/>
    </div>
    <div class="content-item">
      <img src="images/banner_04.jpg" alt=""/>
    </div>
  </div>
</div>
<div class="js-tab tab" data-config='{
                                         "triggerType":"click",
                                         "effect":"fade",
                                         "invoke":1,
                                         "auto":1000
                                      }' >
  <ul class="tab-nav">
    <li class="actived">
      <a href="javascript:void(0)">新闻</a>
    </li>
    <li>
      <a href="javascript:void(0)">娱乐</a>
    </li>
    <li>
      <a href="javascript:void(0)">电影</a>
    </li>
    <li>
      <a href="javascript:void(0)">科技</a>
    </li>
  </ul>
  <div class="content-warp">
    <div class="content-item current">
      <img src="images/banner_01.jpg" alt=""/>
    </div>
    <div class="content-item">
      <img src="images/banner_02.jpg" alt=""/>
    </div>
    <div class="content-item">
      <img src="images/banner_03.jpg" alt=""/>
    </div>
    <div class="content-item">
      <img src="images/banner_04.jpg" alt=""/>
    </div>
  </div>
</div>
<div class="js-tab tab" data-config='{
                                         "triggerType":"click",
                                         "effect":"fade",
                                         "invoke":1,
                                         "auto":1000
                                      }' >
  <ul class="tab-nav">
    <li class="actived">
      <a href="javascript:void(0)">新闻</a>
    </li>
    <li>
      <a href="javascript:void(0)">娱乐</a>
    </li>
    <li>
      <a href="javascript:void(0)">电影</a>
    </li>
    <li>
      <a href="javascript:void(0)">科技</a>
    </li>
  </ul>
  <div class="content-warp">
    <div class="content-item current">
      <img src="images/banner_01.jpg" alt=""/>
    </div>
    <div class="content-item">
      <img src="images/banner_02.jpg" alt=""/>
    </div>
    <div class="content-item">
      <img src="images/banner_03.jpg" alt=""/>
    </div>
    <div class="content-item">
      <img src="images/banner_04.jpg" alt=""/>
    </div>
  </div>
</div>
<script src="jquery-1.7.2.js"></script>
<script src="tab.js"></script>
<script>
  Tab.init($('.js-tab'))
  console.log(Tab)
</script>
</body>
</html>